<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head th:replace="_fragments :: head">
  <!--<title></title>-->
</head>
<body th:inline="javascript">

  <!--导航-->
  <nav th:replace="_fragments :: menu(6)"></nav>

  <!--中间内容-->
  <div  class="m-container-small m-padded-tb-big animated fadeIn">
    <div class="ui center aligned sizer basic segment">
      <h2 class="ui center aligned icon big header" cover-class="letter-spaced "><i class="circular record icon"></i> 武哥的视频课程 </h2>
    </div>

    <div id="courses">
      <div class="ui basic segment">
        <div class="ui four teal stackable doubling special cards">
          <div class="card animated fadeIn" data-content="${video.name}" th:each="video : ${videos}">
            <div class="blurring dimmable image">
              <img th:src="${video.picture}">
            </div>
            <div class="content">
              <a th:href="@{/videos/{id}(id=${video.id})}" th:text="${video.name}" class="header" cover-class="ellipsis"></a>
              <div class="meta" cover-class="padded-tb-small">
                <span class="category">
                  <i class="unhide icon"></i><span th:text="${video.views}"></span>
                </span>
                <div class="right floated time" th:text="${video.time} + h"></div>
              </div>
            </div>
            <div class="extra content">
              <div class="ui teal basic label" th:text="${video.tag}"></div>
              <div class="ui right floated orange header " th:text="￥ + ${video.price}"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <br>
  <br>
  <!--底部footer-->
  <footer th:replace="_fragments :: footer"></footer>
  <!--/*/<th:block th:replace="_fragments :: script">/*/-->
  <!--/*/</th:block>/*/-->

  <script>
    $('.menu.toggle').click(function () {
      $('.m-item').toggleClass('m-mobile-hide');
    });

  </script>
  <script>
      window.onload = function () {
          document.title = [[${title}]];
      }
  </script>
</body>
</html>